<!-- 友情链接 -->
<template>
    <div>
        <czh-nav></czh-nav>
        <div class="container">
            <el-row :gutter="30">
                <el-col :sm="24" :md="16" style="transition:all .5s ease-out;margin-top:60px;">
                    <czh-friends></czh-friends>
                </el-col>
                <el-col id="myElement" :sm="24" :md="8" :style="windowswidth>990&&scrollDistance > 400 ? fixedcol : ''">
                    <czh-rightlist></czh-rightlist>
                </el-col>
            </el-row>
        </div>
        <czh-footer/>
    </div>
</template>

<script>
import header from '../components/header.vue'
import friends from '../components/friends.vue'
import rightlist from '../components/rightlist.vue'
import comment from '../components/comment.vue'
import  footer  from '../components/footer.vue'
export default {
    name: 'FriendsLink',
    data() { //选项 / 数据
        return {
            scrollDistance: 0,
            domleft: 1000,
            position: 'fixed',
            left: 0,
            width: 0,
        }
    },
    computed: {

        windowswidth(){
           return window.innerWidth
        },
        fixedcol() {
            return {
                position: this.position,
                top: '60px',
                left: this.domleft + 'px',
                width: this.width + 'px',
            }
        }
    },
    methods: { //事件处理器
        handleScroll() {
            this.scrollDistance = window.scrollY;
        },
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
        //获取元素的宽度和距离左边的距离
        const element = document.getElementById('myElement');
        if(element) {
            const rect = element.getBoundingClientRect();
            this.domleft = rect.left;
            this.width = rect.width;
            console.log(this.width)
        }
    },
    components: { //定义组件
        'czh-nav': header,
        'czh-comment': comment,
        'czh-friends': friends,
        'czh-rightlist': rightlist,
        'czh-footer':footer
    },
    created() { //生命周期函数

    }
}
</script>

<style></style>
